Custom Themes

Here is an example of how to use MagicMotion with prism-themes

Example

import { MagicMotion } from 'magic-motion';
import 'prism-themes/themes/prism-one-dark.css';

const App = () => {
    const [animateTo, setAnimateTo] = useState();

    const buttonHandler = () => {
        setAnimateTo('const sum = (a, b) => a + b;');
    };

    return (
        <>
            <MagicMotion
                initialContent="const value = 5;"
                animateTo={animateTo}
                codeHighlight={{
                    languageName: 'javascript',
                }}
            />
            <button onClick={buttonHandler}>Animate</button>
        </>
    );
};

export default App;